ARIA: aria-errormessage Attribut

Das aria-errormessage Attribut an einem Objekt identifiziert das bzw. die Elemente, die eine Fehlermeldung für dieses Objekt bereitstellen.

Beschreibung

Wenn ein benutzerdefinierter Fehler auftritt, möchten Sie dem Nutzer mitteilen, dass ein Fehler existiert, und ihm sagen, wie er diesen beheben kann. Dazu müssen Sie zwei Attribute verwenden: Setzen Sie aria-invalid="true", um das Objekt als fehlerhaft zu definieren, und fügen Sie dann das aria-errormessage Attribut hinzu, wobei der Wert die id des Elements (oder der Elemente) ist, die den Text der Fehlermeldung für dieses Objekt enthalten.

Das aria-errormessage Attribut sollte nur verwendet werden, wenn der Wert eines Objekts ungültig ist; wenn aria-invalid auf true gesetzt ist. Wenn das Objekt gültig ist und Sie das aria-errormessage Attribut einfügen, stellen Sie sicher, dass das referenzierte Element ausgeblendet ist, da die darin enthaltene Nachricht nicht relevant ist.

Wenn aria-errormessage relevant ist, müssen das bzw. die referenzierten Elemente sichtbar sein, damit Nutzer die Fehlermeldung sehen oder hören können.

Oftmals wollen Sie, dass das Element mit der Fehlermeldung eine ARIA-Live-Region ist, beispielsweise wenn eine Fehlermeldung den Nutzern angezeigt wird, nachdem sie einen ungültigen Wert eingegeben haben. Die Fehlermeldung sollte beschreiben, was falsch ist, und den Nutzer darüber informieren, was erforderlich ist, um das Objekt gültig zu machen. Das Hinzufügen der Fehlermeldung als ARIA-Live-Region informiert unterstützende Technologien darüber, dass der Nutzer von dem Inhalt der Fehlermeldung profitieren könnte, selbst wenn die Fehlermeldung dem Nutzer sonst nicht angezeigt würde.

Fügen Sie eine sichtbare Fehlermeldung ein und verknüpfen Sie das ungültige Objekt mit dem aria-errormessage Attribut, wenn der Fehler optisch erkennbar ist und eine ausdrückliche Beschreibung des Fehlers erforderlich ist.

Beispiel

Wir erstellen einige Stile, um:

Alle Fehlermeldungen auszublenden,
Ungültige Objekte als ungültig erscheinen zu lassen und
Fehlermeldungen anzuzeigen, die Geschwister sind und nach einem ungültigen Objekt kommen.

Wir verwenden aria-invalid="true", um ungültige Objekte zu identifizieren:

css

.errormessage {
  visibility: hidden;
}

[aria-invalid="true"] {
  outline: 2px solid red;
}

[aria-invalid="true"] ~ .errormessage {
  visibility: visible;
}

Wenn ein Objekt ungültig ist, verwenden wir JavaScript, um aria-invalid="true" hinzuzufügen. Das obige CSS sorgt dafür, dass die .errormessage, die einem ungültigen Objekt folgt, sichtbar wird.

html

<p>
  <label for="email">Email address:</label>
  <input
    type="email"
    name="email"
    id="email"
    aria-invalid="true"
    aria-errormessage="err1" />
  <span id="err1" class="errormessage">Error: Enter a valid email address</span>
</p>

Als wir von gültig zu ungültig wechselten, bestand die einzige Änderung im JavaScript-Beispiel darin, dass aria-invalid im E-Mail-Eingabeobjekt aktualisiert wurde. Da die Fehlermeldung der Eingabe folgt und im Accessibility-Tree sichtbar und verfügbar wird, konnten wir unser Beispiel einfach halten. Wir hätten auch eine aria-live Eigenschaft anwenden oder Rollen von Live-Regionen wie alert verwenden können.

Werte

ID-Referenzliste: Die id oder eine durch Leerzeichen getrennte Liste von Element-ids, die die Fehlermeldung für das aktuelle Element enthalten.

Zugehörige Schnittstellen

Element.ariaErrorMessageElements: Die ariaErrorMessageElements Eigenschaft ist Teil der Schnittstelle jedes Elements. Ihr Wert ist ein Array von Unterklassen von Element, das die id Referenzen im aria-errormessage Attribut widerspiegelt (mit einigen Einschränkungen).
ElementInternals.ariaErrorMessageElements: Die ariaErrorMessageElements Eigenschaft ist Teil der Schnittstelle jedes benutzerdefinierten Elements. Ihr Wert ist ein Array von Unterklassen von Element, das die id Referenzen im aria-errormessage Attribut widerspiegelt (mit einigen Einschränkungen).

Zugehörige Rollen

Verwendet in Rollen:

Erbt von Rollen:

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA) # aria-errormessage